.mark-map{
	position: fixed;
	top: 0;left: 0;
	width: 100%;height: calc(100vh);
	%float-view{
		position: fixed;
		width: auto;
		background-color: rgba(0,0,0,0);
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px;
	}
	.title{
		@extend %float-view;
		top: 20px;left:5px;
		.avatar{
			border-radius: 50%;
			width:56px;height: 56px;
			padding: 0;
		}
		.btn{
			margin-top: 15px;
			margin-left: -2px;
			width:52px;height: 52px;
			background-color: rgba(31,154,228,0.75);
			border-radius: 10px;
			box-shadow: 1px 1px 1px #ccc;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.iconfont{
				font-size: 30px;
				color: #fff;
			}
			.text{
				font-size: 12px;
				margin-top: 0px;
				color: #fff;
				font-weight: 900;
			}
		}
	}
	.tools{
		@extend %float-view;
		bottom: 20px;right:0;
		.location{
			font-size: 32px;
			text-shadow: 1px 1px 1px #333;
			color:$color-blue;
			background-color: rgba(255,255,255,0.5);
			border-radius: 10px;
			padding: 3px;
		}
	}
}